<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="common/header :: head"></head>
<!-- 修改密码 -->
<body>
<div id="wrapper">
    <div style="width: 400px; margin: 90px auto;background-color:rgba(100,149,237,0.5); border-radius: 10px;">
        <div style="width: 100%; height: 100px; color: #eee; font-size: 30px;line-height: 100px; text-align: center">修改密码</div>
        <div style="margin-top: 25px; width: 100%; height: 350px; text-align: center">
            <input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%" placeholder="请输入原密码">
            <div style="width: 90%;margin: 0 auto;margin-top: 10px;text-align: left;">新密码,以字母开头,长度在6~18之间,包含字母、数字和特殊符号</div>
            <input id="NewPassword" v-model="OldPassword" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%; margin-top: 20px" placeholder="请输入新密码">
            <input id="OldPassword" @blur="onBlur" v-model="NewPassword" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px" placeholder="确认密码">
            <button @click="compare" style="height: 40px; padding: 10px; width: 60%; margin-top: 25px; background-color: steelblue; color: white">确定</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            NewPassword: '',
            OldPassword: '',
        },
        methods: {
            onBlur: function () {
                if ($('#NewPassword').val() != $('#OldPassword').val()) {
                    this.$message({message: "两次输入密码不一致", type: "error"});
                }
            },
            compare() {
                this.user.username = JSON.parse(sessionStorage.getItem("user")).username
                if (!this.user.password) {
                    this.$message({message: "请输入旧密码再提交", type: "error"});
                    return;
                }
                if (!$('#NewPassword').val()) {
                    this.$message({message: "请输入新密码再提交", type: "error"});
                    return;
                }
                if (!$('#OldPassword').val()) {
                    this.$message({
                        message: "请确认密码再提交", type: "error"
                    });
                    return;
                }
                var pat = /^[a-zA-Z][a-zA-Z0-9_!@#$%^&*()-+=,.]{5,17}$/;
                if (!pat.test($('#NewPassword').val())) {
                    this.$message({message: "以字母开头,长度在6~18之间,包含字母、数字和特殊符号", type: "error"});
                    return;
                }
                if ($('#OldPassword').val().length < 8) {
                    this.$message({message: "新密码长度不能小于8位", type: "error"});
                    return;
                }
                if ($('#NewPassword').val().length < 8) {
                    this.$message({message: "新密码长度不能小于8位", type: "error"});
                    return;
                }
                let params = new URLSearchParams();
                params.append("username", this.user.username);
                params.append("password", this.user.password);
                return axios.post("api/user/compare", params).then(res => {
                    if (res.data.code == "0") {
                        if (this.OldPassword === this.NewPassword) {
                            this.user.password = this.NewPassword
                            if (res.data.code == 0) {
                                let params = new URLSearchParams();
                                params.append("username", this.user.username);
                                params.append("password", this.user.password);
                                return axios.post("api/user/updatePassword", params).then(res => {
                                    if(res.data.code == 0){
                                        this.$message({message: "修改密码成功，即将跳转页面", type: "success"});
                                        setTimeout(() => {parent.changeIndex('index');}, 2000);
                                    }
                                });
                            }
                        } else {return;}
                    }else if (res.data.code == "1"){
                        this.$message({message: "旧密码错误，请重新输入!", type: "error"});
                        return;
                    }else{
                        this.$message({message: res.data.msg, type: "error"});
                        return;
                    }
                });

                /*$.ajax({
                    url: "/api/user/compare",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.user)
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message({message: "旧密码错误，请重新输入", type: "error"});
                        return;
                    }
                    if (this.OldPassword === this.NewPassword) {
                        this.user.password = this.NewPassword
                        if (res.data.code == 1) {
                            $.ajax({
                                url: "/api/user/updatePassword",
                                type: "POST",
                                contentType: "application/json",
                                data: JSON.stringify(this.user)
                            }).then(res => {
                                if (res.data.code == 1) {
                                    $.ajax({
                                        url: "/api/user/updatePassword",
                                        type: "POST",
                                        contentType: "application/json",
                                        data: JSON.stringify(this.user)
                                    }).then(res => {
                                        this.$message({message: "修改密码成功，即将跳转页面", type: "success"});
                                        setTimeout(() => {
                                            parent.changeIndex('index');
                                        }, 2000);
                                    });
                                }
                            })
                        }
                    } else {
                        return;
                    }
                })*/
            }
        }
    })
</script>
</body>
</html>
